﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>访问插槽的内容</title>
</head>
<body>
    <div id="app">
        <page-layout>
            <template v-slot:default="slotProps">
                {{ slotProps.values.city }}
            </template>
        </page-layout>
    </div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    
    const vm = Vue.createApp({ });
    vm.component('page-layout', {
        data: function() {
            return {
                info: {
                    name: '苹果',
                    price: 8.86,
                    city: '深圳'
                }
            }
        },
        template: `
            <button>
                <slot v-bind:values="info">
                    {{info.city}}
                </slot>
            </button>
        `
    });
    vm.mount('#app');
</script>
</body>
</html>
